<template>
	<div class="login">
		<div class="title">
			<img src="./assets/img/avatar.jpg" />
			<div class="text">用户登录</div>
		</div>
		<div class="form">
			<div class="username">
				<div class="text">用户名：</div>
				<input type="text" v-model="loginData.username" />
			</div>
			<div class="password">
				<div class="text">密码：</div>
				<input type="password" v-model="loginData.password" />
			</div>
		</div>
		<div class="button" @click="login(loginData)">登录</div>
	</div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapActions: loginMapActions } = createNamespacedHelpers('userlogin');

export default {
	name: 'login',
	data() {
		return {
			loginData: {
				username: '',
				password: '',
			},
		};
	},
	methods: {
		...loginMapActions(['login', 'isLogin']),
	},
	async mounted() {
		if (await this.isLogin()) {
			// 如果已经登录，则跳转至炸弹页面
			location.href = '/bombpage';
		}
	},
};
</script>


<style lang="scss" scope>
* {
	margin: 0;
	padding: 0;
}

.login {
	width: 100%;
	height: 100vh;
	background-color: rgb(255, 198, 93);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	user-select: none;

	.title {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.text {
			font-size: 58px;
			font-weight: 300;
			margin-left: 36px;
		}

		img {
			width: 90px;
			border: 3px blue solid;
			border-radius: 50%;
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 30vh;
		width: 60vw;

		.username,
		.password {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.text {
				font-size: 26px;
			}

			input {
				position: relative;
				outline: none;
				height: 36px;
				width: 350px;
				font-size: 26px;
				border: 2px blueviolet solid;
				border-radius: 6px;

				&:focus {
					border: 3.5px rgb(255, 18, 204) solid;
					box-shadow: 0 0 5px 1.5px rgb(255, 18, 204);
				}
			}
		}

		.password {
			input {
				left: 14px;
			}
		}
	}

	.button {
		font-size: 28px;
		width: 80px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		cursor: pointer;

		&:hover {
			background-color: blue;
			color: white;
			border-radius: 6px;
		}
	}
}
</style>